﻿<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<title>智能课堂 —— 微博ajax接口测试 - www.zhinengshe.com</title>
<link href="style/weibo.css" rel="stylesheet" type="text/css" />
    <script src="js/angular.js"></script>
<script>
    angular.module('index',[])
        .controller('msgCtrl',($scope,$http)=>{
            //1数据
            $scope.msgList=[];

            //4分页
            $scope.pages = [];

            //5当前页
            $scope.curpage =1 ;

//            //2获取一页数据
//            $http.get('weibo.php?act=get&page='+page).then(res=>{
//                $scope.msgList = res.data;
//                console.log(res.data)
//            },err=>{});

            //6获取页数(渲染分页)
                $scope.rederPage = ()=>{
                    $http.get(`weibo.php?act=get_page_count`).then(res=>{
                        $scope.pages=[];
                        for(let i=1;i<=res.data.count;i++){
                            $scope.pages.push(i)
                        }
                    },err=>{});
                };


            //3新增一条数据
            $scope.addNew = ()=>{
                $http.get(`weibo.php?act=add&content=${$scope.content}`).then(res=>{
                    console.log(res.data);
                    if(res.data.error){
                        alert('发布失败')
                    }else{
                        alert('发布成功');
                        $scope.getPageData();
                        //清空输入框
                        $scope.content = ''
                    }
                },err=>{})
            };

            // 7 获取一页数据
            $scope.getPageData = (page)=>{
                $scope.curpage = page || $scope.curpage;
                //2获取一页数据
                $http.get('weibo.php?act=get&page='+$scope.curpage).then(res=>{
                    if(res.data.length == 0 && $scope.curpage!=1){
                        $scope.curpage-- ;
                        $scope.getPageData();
                    }else{
                        $scope.msgList = res.data;
                        $scope.rederPage();
                        console.log(res.data)
                    }
                },err=>{});

            };
            $scope.getPageData(1);

            //8.删除一条数据
            $scope.delMsg = (id)=>{
                if(confirm('真的要删除吗？')){
                    $http.get(`weibo.php?act=del&id=${id}`).then(res=>{
                        $scope.getPageData()
                    },err=>{})
                }
            };

            //9.点赞
            $scope.ding = (id)=>{
                $http.get(`weibo.php?act=acc&id=${id}`).then(res=>{
                   for(let i=0;i<$scope.msgList.length;i++){
                       if($scope.msgList[i].id==id){
                           $scope.msgList[i].acc++;
                           break;
                       }
                   }
                },err=>{})
            };

            //10.踩
            $scope.cai = (id)=>{
                $http.get(`weibo.php?act=ref&id=${id}`).then(res=>{
                    for(let i=0;i<$scope.msgList.length;i++){
                        if($scope.msgList[i].id==id){
                            $scope.msgList[i].ref++;
                            break;
                        }
                    }
                },err=>{})
            }
            //11.Enter发布
        })
</script>
</head>

<body ng-controller="msgCtrl">
<div class="znsArea">
<!--留言-->
     <div class="takeComment">
        <textarea name="textarea" class="takeTextField" id="t1" ng-model="content"></textarea>
        <div class="takeSbmComment">
            <input type="button" class="inputs" value="" id="btn1" ng-click="addNew()"/>
            <span>(可按 Enter 回复)</span>
        </div>
    </div>
<!--已留-->
    <div class="commentOn">
        <div class="messList" id="msg_box">
		<div class="noContent" ng-show="msgList.length==0" ng-model="asd">暂无数据！</div>
        	<div class="reply" ng-repeat="item in msgList">
                <p class="replyContent">{{item.content}}</p>
                <p class="operation">
                    <span class="replyTime">{{item.time*1000|date:'yyyy-MM-dd HH:mm:ss'}}</span>
                    <span class="handle">
                    	<a href="javascript:;" class="top" ng-click="ding(item.id)">{{item.acc}}</a>
                        <a href="javascript:;" class="down_icon" ng-click="cai(item.id)">{{item.ref}}</a>
                        <a href="javascript:;" class="cut" ng-click="delMsg(item.id)">删除</a>
                    </span>
                </p>
            </div>
        </div>
        <!--分页-->
        <div class="page" id="page_box">
        	<a href="javascript:;" class="{{item==curpage?'active':''}}" ng-repeat="item in pages" ng-click="getPageData(item)">{{item}}</a>
        </div>
    </div>
</div>
</body>
</html>
